<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    value?: StrNumber;
    /**为正时颜色 */
    plusColor?: string;
    /**为负时颜色 */
    minusColor?: string;
    /**为正时背景*/
    plusBg?: string;
    /**为负时背景*/
    minusBg?: string;
    format?: string;
  }>(),
  {
    value: "--",
    plusColor: "var(--C-success)",
    minusColor: "var(--C-fail)",
  }
);
const isMinus = computed(() => Number(props.value < 0));
const $style = computed(() => ({
  background: isMinus.value ? props.minusBg : props.plusBg,
  color: isMinus.value ? props.minusColor : props.plusColor,
}));
const $value = computed(() => {
  if (!props.format) return props.value;
  return props.format.replace(/{value}/, props.value.toString());
});
</script>

<template>
  <span :style="$style">
    <slot name="left"></slot> {{ $value }} <slot name="right"></slot>
  </span>
</template>

<style lang="less" scoped></style>
